<template>
  <div class="about">
    <h1>This is an about page</h1>
    {{myCount}}-{{user}} -  
    {{evenOrOdd}}
    <button @click='increment'>+1</button>
    <button @click='decrement'>-1</button>
    <button @click='incrementAsync'>+1异步操作</button>
  </div>
</template>
<script>
import { mapState} from "vuex";
export default {
  computed: {
    // count() {
    //   return this.$store.state.count;
    // },
    // username(){
    //   return this.$store.state.username;
    // },
    // ...mapState(['count']),
    ...mapState({
      myCount: "count",
      user:'username'
    }),

    evenOrOdd(){
      return this.$store.getters.evenOrOdd;
    }
    // ...mapGetters(['evenOrOdd'])

  },
  methods: {
    increment() {
      // dispatch触发action中声明的方法(异步)
        // this.$store.dispatch('increment');
        this.$store.commit('increment')
    },
    decrement(){
      // this.$store.dispatch('decrement');
      this.$store.commit('decrement')
    },
    incrementAsync(){
      this.$store.commit('incrementAsync')
    }
  },
}
</script>
